<template>
  <div class="category-info">
    <!-- 左边部分滚动区域 -->
    <!-- bug: 初始化时有可能数组为空 -->
    <scroll class="content info-item" v-if="subCateList.length">
      <ul>
        <li
          class="subCategory-item"
          v-for="(t, index) in subCateList"
          :key="index"
          :class="{ active: currentIndex === index }"
          @click="itemClick(index)"
        >
          {{ t.title }}
        </li>
      </ul>
    </scroll>
    <!-- 右边部分滚动区域 -->
    <scroll
      ref="betterScroll"
      class="content item-body"
      v-show="rightList.length"
    >
      <ul class="item-father">
        <li class="item-son" v-for="(t, index) in rightList" :key="index">
          <a :href="t.link">
            <div>
              <img :src="t.image" alt="分类商品图片" @load="imgLoad" />
            </div>
            <p>{{ t.title }}</p>
          </a>
        </li>
      </ul>
    </scroll>
  </div>
</template>

<script>
import Scroll from 'components/common/Scroll/Scroll.vue'
import { debounce } from 'utils/tools'

export default {
  name: 'CategoryScroll',
  props: {
    subCateList: {
      type: Array,
      default () {
        return []
      }
    },
    rightList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  components: {
    Scroll
  },
  data () {
    return {
      currentIndex: 0,
      // 防抖
      isImgLoad: null
    }
  },
  created () {},
  mounted () {
    // 操纵原生js的方式, 将tabBar的盒子阴影去掉, 尽量少用这种方式
    const tabBar = document.getElementsByClassName('tab-bar')[0]
    tabBar.style.boxShadow = 'none'

    const refresh = debounce(this.$refs.betterScroll.refresh, 200)

    this.isImgLoad = () => {
      refresh()
    }
  },
  updated () {
    // this.$refs.betterScroll.refresh()
  },
  activated () {},
  deactivated () {},
  computed: {},
  methods: {
    // 每次点击时发射
    itemClick (idx) {
      this.currentIndex = idx

      const maitKey = this.subCateList[idx].maitKey

      // 传递数据
      this.$emit('subItemClick', maitKey)

      this.$refs.betterScroll.scrollTo(0, 0, 0)
    },
    imgLoad () {
      // 防抖
      this.isImgLoad()
    }
  },
  watch: {
    // 监听第一次的默认项
    subCateList (newAry, oldAry) {
      // 监听
      this.$emit('subItemClick', newAry[this.currentIndex].maitKey)
    }
  }
}
</script>

<style lang="less" scoped>
.category-info {
  display: flex;

  // 左边
  .info-item {
    width: 30%;
    text-align: center;
    background-color: #e3e3e3;

    .subCategory-item {
      padding: 20px 0;
      font-size: 14px;
    }
  }

  // 右边
  .item-body {
    flex: 1;

    .item-father {
      display: flex;
      flex-wrap: wrap;
    }

    .item-son {
      width: 33.3333%;
      text-align: center;
      padding: 10px;

      a {
        display: block;
      }

      img {
        width: 100%;
        margin-bottom: 10px;
      }

      p {
        font-size: 14px;
      }
    }
  }

  .content {
    height: calc(100vh - 93px);
    overflow: hidden;
  }

  .active {
    color: var(--color-high-text);
    border-left: 3px solid red;
    font-weight: 700;
    background-color: #fff;
  }
}
</style>
